<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
		<title>贝达教育</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css">
		<link rel="stylesheet" href="../../src/iconfont/iconfont.css">
		<style>
			.InWqhgP {
				margin-bottom: 0.2rem;
			}
			
			.video {
				margin: 0.2rem 0;
			}
			
			.video img {
				width: 100%;
			}
			
			.mui-scroll li {
				float: left;
			}
			
			.playbtn img {
				position: absolute;
				width: 1rem;
				left: 50%;
				top: 50%;
				margin-top: -0.5rem;
				margin-left: -0.5rem;
			}
			
			.scrollteacher {
				overflow-x: auto;
				text-align: center;
				overflow-y: hidden;
			}
			
			.scrollteacher ul {
				margin: 0.2rem 0;
			}
			
			.scrollteacher ul li {
				width: 115px;
				height: 80px;
				text-align: center;
				margin-right: 5px;
			}
			
			.IndTit {
				margin-top: 0.2rem;
			}
			
			.ShopHePic .mui-media-object {
				width: 1.65rem;
				height: 70px;
			}
			
			.IndOneE span {
				padding-top: 3px;
				padding-bottom: 2px;
			}
			
			.otherIndOneP {
				margin-top: 0.1rem;
			}
			
			.shopBoxa {
				width: 100%;
				position: absolute;
				top: 10px;
				padding-left: 110px;
				height: 75px;
			}
			
			.sendinfo {
				margin-top: 15px;
				margin-left: 10px;
				font-size: 14px;
				color: #7b7b7b;
				width: 4.7rem;
			}
			
			.ShopANrs {
				font-size: 14px;
				padding-right: 10px;
			}
			
			.sendinfos {
				position: absolute;
				bottom: 0px;
			}
			
			.ShopA {
				padding-bottom: 0px;
			}
			
			.bordera {
				/* border-bottom: dashed #eee 1px; */
				border-radius: 10px;
				box-shadow: 0px 4px 20px 0px rgba(220, 220, 220, 0.41);
				margin-bottom: 15px;
				padding: 10px;
				position: relative;
			}
			
			.sendname {
				font-size: 12px;
			}
			
			.ClassT {
				border-bottom: 0px;
			}
			
			.ClassTo i {
				background: #FECF0E;
			}
			
			.ClassTa i {
				/* background-color: #FECF0E; */
				height: 5px;
				border-radius: 100px;
			}
			
			.MP60 {
				margin-top: 20px;
				padding-top: 0px;
			}
			
			.ShopHePic {
				height: 80px;
				width: 80px;
			}
			
			.ShopHePic img {
				height: 60px;
				width: 60px;
			}
			
			.ShopHear {
				padding: 10px;
				margin-top: 50px;
				border-radius: 10px;
			}
			
			.ShopHear .headerImg {
				border-radius: 10px;
				box-shadow: 0px 6px 11px 0px rgba(140, 140, 140, 0.41);
				position: relative;
			}
			
			.ShopHeN {
				position: absolute;
				top: 0px;
			}
			
			.newShopImg {
				width: 80px;
				height: 80px;
				position: absolute;
				top: 20px;
				left: 20px;
			}
			
			.newShopImg img {
				width: 80px;
				height: 80px;
				border-radius: 10px;
			}
			
			.newShopInfo {
				width: 100%;
				padding-left: 100px;
				position: absolute;
				top: 0px;
			}
			
			.ShopHeNt {
				top: 15px;
				position: absolute;
				font-size: 18px;
				font-weight: bold;
			}
			
			.IndOneE {
				top: 40px;
			}
			
			.IndOneE span {
				color: #ffffff;
			}
			
			.ShopTK {
				padding-top: 0px;
			}
			
			.newHeaderBg {
				background-image: url('../../images/ShopT.jpg');
				height: 100px;
				border-radius: 10px;
				overflow: hidden;
				background-repeat: no-repeat;
				background-size: 100%;
				box-shadow: 0px 10px 16px 0px #cccccc;
			}
			
			.header {
				text-align: center;
				font-size: 18px;
			}
			
			.heand_left {
				position: absolute;
				left: 0;
				padding-left: 0;
			}
			
			.heand_right {
				position: absolute;
				right: 0;
				top: 0;
			}
			.videoWidth{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="detail" class="dk">
			<!--head-开始-->

			<div class="header" style="text-align: center;">
				<span class="mui-back mui-action-back mui-icon mui-icon-left-nav mui-pull-left heand_left"><img src="../../images/icon/Back_j.png"></span>
				<span>学校详情</span>
				<div class="heand_right" style="width: auto;padding-right: 10px;">
					
					<span class="iconfont icon-servicefill" @tap="services()" style="font-size: 20px;"></span>
					<span class="iconfont" @click="savetofav($event,item)" style="font-size: 20px;margin-left:2px;" v-bind:class="[item.codes==0?'icon-favor':'icon-favorfill']"></span> 
					<span class="iconfont icon-share1" onclick="openShare()" style="font-size: 20px;"></span>
					
					<div class="clear"></div>
				</div>
				<!--div class="heand_con fl">学校详情</div-->
				<!--div class="heand_right fl">
                <div class="hd_right fl" @tap="services()">
                    <img src="../../images/icon/hd_icon01.png" />
                </div>
                <div v-if="item.codes==0" href="javascript:;" class="hd_right fl">
                    <img @tap="savetofav($event,item)" src="../../images/icon/hd_icon02.png" />
                </div>
                <div v-if="item.codes==1" href="javascript:;" class="hd_right fl">
                    <img @tap="savetofav($event,item)" src="../../images/icon/hd_icon02fill.png" />
                </div>
                <div class="hd_right fl" id="sharea"><img src="../../images/icon/hd_icon03.png" onclick="openShare()" /></div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div-->
			</div>
			<!--head-结束-->
			<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
				<div class="mui-scroll">
					<div class="ShopHear ban4rem" style="padding-bottom: 20px;">
						<!-- <img class="headerImg" src="../../images/ShopT.jpg" width="100%" /> -->
						<div class="newHeaderBg">
							<div class="newShopImg">
								<img :src="item.pic" alt="">
								<!-- <div class="bg mui-media-object" :style="{backgroundImage:'url(' + item.pic + ')'}"></div> -->
							</div>
							<div class="newShopInfo">
								<div class="ShopHeNt">{{item.name}}</div>
								<div class="IndOneE"><span v-for="label in item.type">{{label.dict_field}}</span></div>
								<!-- <p>{{item.con.slice(20)}}...</p> -->
							</div>
						</div>

					</div>

					<!--腰线-开始-->
					<div class="ShopTK">
						<div class="ClassT" id="mynav" style="height: 45px;">
							<a href="#ShopZ1" class="ClassTa ClassTo fl">课程<i></i></a>
							<a href="#ShopZ2" class="ClassTa fl">学校信息<i></i></a>
							<a href="#ShopZ3" class="ClassTa fl">历史信息<i></i></a>
						</div>
					</div>
					<!--腰线-开始-->

					<!--课程-开始-->
					<div id="ShopZ1" class="MP60">
						<div class="IndOne" style=" padding-top:0px;">
							<a href="JavaScript:;" class="IndOneA" v-for="item in item.schedule" @tap="opendetail(item)">
								<div class="IndOneI fl">
									<!-- <div class="bg mui-media-object" :style="{backgroundImage:'url(' + item.pic + ')'}" style="height: 1.5rem;"></div> -->
									<img :src="item.pic" style="width: 80px;height:80px;" alt="">
								</div>
								<div class="IndOneP otherIndOneP fr">
									<div class="IndOneB">{{item.name}}</div>
									<div class="IndOneC">
										<div class="IndOnSty fl">
											<!-- <img src="../../images/star.png" class="fl" v-for="(star,index) in 5" v-if="index<=item.comment-1" /> -->
											<span class="iconfont icon-favorfill" style="color: #FECF0E;" v-for="(star,index) in 5" v-if="index<=item.comment-1"></span>
											<span>{{item.comment}}分</span>
										</div>
										<div class="IndOneM fr">
											<!--span class="IndOeye">{{itema.views}}</span--><span class="fr"></span></div>
										<div class="clear"></div>
									</div>
									<div class="IndOneE otherindone"><span>{{item.type}}</span></div>
								</div>
								<div class="clear"></div>
							</a>
						</div>
					</div>
					<!--课程-结束-->

					<!--课程介绍-开始-->
					<!-- <div id="ShopZ2" class="MP60">
                    <div class="ShopTit">学校信息<i></i></div>
                </div> -->

					<div class="IndOne MP60" id="ShopZ2">

						<div class="shopAddT">{{item.name}}</div>

						<div class="shopAddN">
							<p class="shopAddI1">地址：{{item.add}}</p>
							<p class="shopAddI2">电话：{{item.tel}}</p>
						</div>

						<div class="IndTit">学校视频</div>
						<div class="video" style="width: 100%;position: relative;">

							<img v-if="item.videos==0" :src="item.video" style="border-radius: 10px;" />
							<video id="videoWidth" v-if="item.videos==1" @tap="play(event)" :src="item.video" class="videoWidth" :poster="item.videoimg">
							</video>
							<div v-if="item.videos==1" id="playbtn" @tap="playbtn(event)" class="playbtn"><img src="../../images/play.png" /></div>
						</div>

						<div class="IndTit">学校照片</div>

						<div class="wrapper wrapper02" id="retr3">
							<div class="scrollteacher">
								<ul>
									<li v-for="(teacher,index) in item.gong">
										<div class="mui-media-objectb" @tap="previewimg(item.gong,index)" :style="{backgroundImage:'url(' + teacher + ')'}"></div>
									</li>
								</ul>
							</div>
						</div>

						<div class="IndTit" v-if="item.teacher">师资介绍</div>
						<div class="scrollteacher scrollteacherb">
							<ul>
								<li v-for="(teacher,index) in item.teacher">
									<div class="mui-media-objectb" @tap="previewimg(item.teacher,index)" :style="{backgroundImage:'url(' + teacher.member_avatar + ')'}"></div>
									<p>{{teacher.name}}</p><span>{{teacher.member_school}}</span>
								</li>
							</ul>
						</div>
						<div class="clear"></div>

						<div class="IndTit">学校简介</div>
						<div class="ClasJJ">{{item.con}}</div>
						<div class="read ClasJJA" @tap="handleFold(event)" v-if="conlength>75">阅读全文</div>

					</div>
					<!--课程介绍-结束-->

					<!--历史消息-开始-->
					

					<div class="IndOne MP60" id="ShopZ3">
						<a @tap="open_detail(ad)" class="ShopA  bordera" v-for="ad in item.ad">
							<div class="ShopAPic">
								<img :src="ad.pic" style="width: 100px;border-radius: 5px;" alt="">
							</div>
							<div class=" shopBoxa">
								<div class="ShopANrs">{{ad.name}}</div>
								<div class="sendinfos">
									<div class=""><span class="sendname">{{ad.uid}}</span></div>
									<!-- <div class="fr"><span>{{ad.catime}}</span></div> -->
								</div>
							</div>
						</a>
					</div>
					<!--历史消息-结束-->
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
	<script src="../../js/mui.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/navfix.js"></script>
	<script src="../../js/token.js"></script>
	<script type="text/javascript">
		$(document).ready(function(e) {
			$('#mynav').navfix(0, 999);
		});
	</script>
	<script>
		jQuery(document).ready(function($) {
			//育儿课程
			$('.ClassTa').click(function() {
				console.log(this)
				// if (!$(this).hasClass('ClassTo')) {
				$('.ClassTa').removeClass('ClassTo');
				$(this).addClass('ClassTo');
				// }
			})

		})
		window.onscroll = function() {
			var menuChilda = document.getElementById('mynav').getElementsByTagName('a');
			var contentChild = $('.MP60');
			var windowheight = $(this).height();
			var scrollHeight = $(document).height();   
			var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;     
			for(var i = 0; i < menuChilda.length; i++) {     
				if(scrollTop + menuChilda[0].offsetHeight >= contentChild[i].offsetTop) {       
					for(var j = 0; j < menuChilda.length; j++) {         
						$('#mynav a').removeClass('ClassTo');      
					}       
					$('#mynav a').eq(i).addClass('ClassTo');    
				} else if(scrollTop + windowheight == scrollHeight) {
					$('#mynav a').removeClass('ClassTo');
					$('#mynav a').last().addClass('ClassTo');
				}   
			}  
		};
	</script>
	<script type="text/javascript">
		//停止播放
		function pause() {
			for(var i = 0; i < $('.videoWidth').length; i++) {
				$('.videoWidth')[i].pause();
				$('.playbtn')[i].style.display = 'block';
			}
		}
		var uid = "";
		var instid = "";
		var favoritestatus = 0; //关注按钮状态，避免快速点击
		var state = '';
		var sec = '';
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			state = app.getState();
			memberToken = state.memberToken
			uid = state.userid;
			instid = self.instid;
			var paradata = {
				uid: uid,
				id: instid,
				memberToken: memberToken
			};
			mui.post(Apiurl+'index/institution_info', paradata, function(data) {
				detail.item = data;
				console.log(JSON.stringify(data)) 
				sec = data.sec;
				detail.conlength = data.con.toString().length;
				$('.scrollteacher ul').width(120 * data.gong.length)
				$('.scrollteacherb ul').width(120 * data.teacher.length)
			}, 'json');

			/*for(var i = 0; i < mui('#retr3 .mui-media-objecta').length; i++) {
				var urlss = [];
				urlss[i] = mui('#retr3 .mui-media-objecta')[i].backgroundImage;
				(function(i) {
					mui('#retr3 .mui-media-objecta')[i].addEventListener('tap', function() {
						plus.nativeUI.previewImage(urlss, {
							current: i, //点击图片时显示图片的索引值    
							indicator: 'number',
							loop: true
						});
					});
				})(i);
			}*/
		});

		var detail = new Vue({
			el: '#detail',
			data: {
				item: [],
				conlength: ''
			},
			methods: {
				handleFold: function(e) {
					if(e.target.previousElementSibling.getAttribute('class') == 'ClasJJ') {
						e.target.previousElementSibling.setAttribute('class', 'ClasJ6');
						e.target.innerHTML = '收起';
					} else {
						e.target.previousElementSibling.setAttribute('class', 'ClasJJ');
						e.target.innerHTML = '阅读全文';
					}
				},
				play: function(e) {
					document.getElementById('videoWidth').pause();
					document.getElementById('playbtn').style.display = 'block';
				},
				playbtn: function(e) {
					document.getElementById('videoWidth').play();
					document.getElementById('playbtn').style.display = 'none';
				},
				services: function() {
					pause();
					mui.openWindowWithTitle({
						url: sec,
						id: 'servicesa',
						preload: true,
						show: {
							aniShow: 'pop-in',
							autoShow: true
						},
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": { //详情页原生导航配置
								backgroundColor: '#fff', //导航栏背景色
								titleText: '小秘书', //导航栏标题
								titleColor: '#000', //文字颜色
								autoBackButton: true, //自动绘制返回箭头
								splitLine: { //底部分割线
									color: '#dfdfdf'
								}
							}
						},
						waiting: {
							autoShow: true
						}
					});
				},
				opendetail: function(item) {
					pause();
					mui.openWindow({
						url: 'Class.html',
						id: 'Classdetail',
						extras: {
							scheduleid: item.id
						},
						createNew: true,
					});
				},
				//关注
				savetofav: function(e, item) {
					var paradata = {
						uid: uid,
						code: item.code,
						memberToken: memberToken
					}

					
					mui.post(Apiurl+'index/follow', paradata, function(data) {
						if (item.codes == 1) {
                        	item.codes = 0;
                        	plus.nativeUI.toast('取消关注', {
								verticalAlign: 'middle'
							});
                        	
	                    } else if (item.codes == 0) {
	                        item.codes = 1;
	                        plus.nativeUI.toast('关注成功', {
								verticalAlign: 'middle'
							});
	                    } 
						
						
						
					}, 'json')	

						mui.fire(plus.webview.getWebviewById("schoolsrefresh"), 'refreshshcools', {
							msgid: item.id, 
							codes:item.codes
						})
					},
				
				open_detail: function(item) {

					mui.openWindow({
						url: item.link,
						id: 'ad_detail',
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": titleNView = { //详情页原生导航配置
								autoBackButton: true, //自动绘制返回箭头
								backgroundColor: '#fff', //导航栏背景色
								titleText: item.name, //导航栏标题
								titleColor: '#000', //文字颜色
								//coverage:"120px",
								//type: 'transparent', //透明渐变样式
								splitLine: { //底部分割线
									color: '#dfdfdf'
								}
							}
						}

					});
				},
				//图片预览
				previewimg: function(item, index) {
					var urls = [];

					item.forEach(function(img) {
						if(img.member_avatar) {
							urls.push(img.member_avatar);
						} else {
							urls.push(img);
						}

					});

					plus.nativeUI.previewImage(urls, {
						current: index,
						loop: true,
						indicator: 'number'
					});
				},

			}

		});

		//处理返回键
		var backButtonPress = 0;
		var old_back = mui.back;
		mui.back = function(event) {
			pause();
			var ws = plus.webview.currentWebview()
			mishuWebview = plus.webview.getWebviewById('servicesa');
			var adWebview = plus.webview.getWebviewById('ad_detail');
			if(mishuWebview) {
				mishuWebview.close();
			} else if(adWebview) {
				adWebview.close();
			} else if(ws) {
				ws.close()
			} else {
				backButtonPress++;
				if(backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			}
		};

		function openShare() {
			shareWebview();
		}
		mui.plusReady(function() {
			ws = plus.webview.currentWebview();
			//关闭splash页面；
			plus.navigator.closeSplashscreen();
		})
		var sharew;
		var ws = null;
		/**
		 *分享窗口
		 */
		function shareWebview() {
			ws = plus.webview.currentWebview();
			if(sharew) { // 避免快速多次点击创建多个窗口
				return;
			}
			var top = plus.display.resolutionHeight - 134;
			var href = "share.html";
			sharew = plus.webview.create(href, "share.html", {
				width: '100%',
				height: '134',
				top: top,
				scrollIndicator: 'none',
				scalable: false,
				popGesture: 'none'
			}, {
				shareInfo: {
					"href": "http://tongban.dqbenxin.com/share/" + instid, 
					"title": detail.item.name,
					"content": detail.item.con,
					"pageSourceId": instid
				}
			});
			sharew.addEventListener("loaded", function() {
				sharew.show('slide-in-bottom', 300);
			}, false);
			// 显示遮罩层  
			ws.setStyle({
				mask: "rgba(0,0,0,0.5)"
			});
			// 点击关闭遮罩层
			ws.addEventListener("maskClick", closeMask, false);
		}

		function closeMask() {
			ws.setStyle({
				mask: "none"
			});
			//避免出现特殊情况，确保分享页面在初始化时关闭 
			if(!sharew) {
				sharew = plus.webview.getWebviewById("share.html");
			}
			if(sharew) {
				sharew.close();
				sharew = null;
			}
		}
	</script>

</html>